import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flex"), // 标题
          leading: Icon(Icons.menu), // 左侧图标
          actions: [Icon(Icons.settings)],  // 右侧图标数组
          elevation: 0.0,// 去掉阴影
          centerTitle: true, // 标题居中

        ),
        body:FlexDemo()
    );
  }
}

class FlexDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 验证 Expanded
        Row(
          children: [
            Container(
              color: Colors.lightBlue,
              height: 50,
              width: 50,
            ),
            Expanded(
                child:Container(
                  color: Colors.lightGreen,
                  height: 50,
                ),
            )
          ],
        ),
        Flex(
          direction: Axis.horizontal,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          // 声明水平方向的排列方式
          textDirection: TextDirection.ltr,
          children: [
            Icon(Icons.access_alarm,size: 30),
            Icon(Icons.accessible_forward_outlined,size: 30),
            Icon(Icons.settings,size: 30),
            Icon(Icons.add_box,size: 30),
          ],
        ),
        Flex(
            direction: Axis.horizontal,
            children: [
              Expanded(
                  child: Container(
                    color: Colors.tealAccent,
                    height:50,
                  ),
                flex: 2,
              ),
              Expanded(
                child: Container(
                  color: Colors.amberAccent,
                  height: 50,
                ),
                flex: 1,
              )
            ],
        ),
        Container(
          height: 100,
          margin: EdgeInsets.all(50),
          child: Flex(
              direction: Axis.vertical,
              children: [
                Expanded(
                    child: Container(
                      color: Colors.tealAccent,
                      height: 50,
                    ),
                  flex: 2,
                ),
                Spacer( // 间距
                  flex: 1,
                ),
                Expanded(
                  child: Container(
                    color: Colors.amberAccent,
                    height: 50,
                  ),
                  flex: 1,
                )
              ],
          ),
        )
      ],
    );
  }
}
